<!DOCTYPE html>
<html>
<head>
    <title>woodwhales-calculator</title>
    <meta charset="UTF-8">
    <meta name="author" content="woodwhales.cn"/>
    <meta name="robots" content="index,all"/>
    <meta name="keywords" content="woodwhales-calculator,calculator,价格对比,省钱,比价,比价计算器"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<a href="https://github.com/woodwhales/woodwhales-tools" target="_blank" class="github-corner"
   aria-label="woodwhales-music">
    <svg width="80" height="80" viewBox="0 0 250 250"
         style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;  z-index: 9000"
         aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
<style>.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0)
    }
    20%, 60% {
        transform: rotate(-25deg)
    }
    40%, 80% {
        transform: rotate(10deg)
    }
}

@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        animation: none
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
    }
}</style>

<div id="app" style="align-content: center; align-items: center; text-align: center;">
    <el-row :gutter="10">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22"><h3 style="font-size: 1em;">woodwhales-calculator</h3>
        </el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
    </el-row>
    <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
            <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        </el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
    </el-row>
    <el-row :gutter="10" style="margin-bottom: 10px; align-content: center; align-items: center; text-align: left;">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
            <el-form :model="form" ref="form" :rules="rules" label-width="60px">
                <el-form-item label="总价" prop="price">
                    <el-input v-model="form.price" class="no-input-number" type="number" :clearable=true></el-input>
                </el-form-item>
                <el-form-item label="规格" prop="standard">
                    <el-input v-model="form.standard" class="no-input-number" type="number"
                              :clearable=true></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="number">
                    <el-input-number v-model="form.number" class="no-input-number" :min="1"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="备注" prop="memo">
                    <el-input v-model="form.memo" :clearable=true></el-input>
                </el-form-item>
                <el-row :gutter="10">
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-button type="success" plain @click="submitForm('form')" style="width: 100%">添加</el-button>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-button type="info" plain @click="resetForm('form')" style="width: 100%">重置</el-button>
                        </el-col>
                </el-row>
            </el-form>
        </el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
    </el-row>
    <el-row :gutter="10" v-if="tableData.length > 0" style="margin-bottom: 10px">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
            <el-button type="danger" plain style="width: 100%;" @click="clearTable">清空表格</el-button>
        </el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
    </el-row>
    <el-row :gutter="10" v-if="tableData.length > 0" style="margin-bottom: 10px;">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
        <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
            <el-card class="box-card" v-for="(data, index) in tableData" :key="data.id" style="text-align: left; margin-bottom: 10px">
                <div slot="header" style="display: flex; line-height: 40px;" class="clearfix" >
                    <el-tag :type="data.maxCheap ? 'success' : ''" style="width: 80px; height: 40px; line-height: 40px; margin-right: 10px">序号：{{index + 1}}</el-tag>
                    <el-input v-model="data.memo" style="margin-right: 10px" placeholder="请输入备注" :clearable=true></el-input>
                    <span style="display: inline-block; width: 10px; margin-right: 10px"> | </span>
                    <el-popconfirm
                            confirm-button-text='确认'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定删除吗？"
                            @confirm="removeDate(data)">
                        <el-button type="danger" plain slot="reference">删除</el-button>
                    </el-popconfirm>
                </div>
                <div>
                    <el-row>
                        <el-form :ref="'form' + data.id" :inline="true">
                            <el-form-item label="总价">
                                <el-input v-model="data.price" class="no-input-number" @input="reCalculate" type="number" :clearable=true></el-input>
                            </el-form-item>
                            <el-form-item label="规格">
                                <el-input v-model="data.standard" class="no-input-number" @input="reCalculate" type="number" :clearable=true></el-input>
                            </el-form-item>
                            <el-form-item label="数量">
                                <el-input-number v-model="data.number" class="no-input-number" @change="reCalculate" :min="1"></el-input-number>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <el-row>
                        折合单价：<span :style="getResultStyle(data)">{{data.result}}</span>
                    </el-row>
                </div>
            </el-card>
        </el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">&nbsp;</el-col>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                rules: {
                    price: [
                        {required: true, message: '请输入单价', trigger: 'blur'}
                    ],
                    standard: [
                        {required: true, message: '请输入规格', trigger: 'blur'}
                    ]
                },
                inline: true,
                deviceType: '',
                form: {
                    id: null,
                    price: '',
                    standard: '',
                    number: 1,
                    maxCheap: false,
                    memo: '',
                    result: ''
                },
                tableData: []
            }
        },
        mounted() {
            this.checkDeviceType();
            window.addEventListener('resize', this.checkDeviceType);
            this.init()
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.checkDeviceType);
        },
        methods: {
            init() {
                this.form = {
                    id: null,
                    price: '',
                    standard: '',
                    number: 1,
                    maxCheap: false,
                    memo: '',
                    result: ''
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.id = this.generateUUID()
                        this.tableData.push(JSON.parse(JSON.stringify(this.form)));
                        this.reCalculate()
                        this.$refs['form'].resetFields();
                    } else {
                        return false;
                    }
                });
            },
            checkDeviceType() {
                const userAgent = navigator.userAgent || navigator.vendor || window.opera;
                if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)) {
                    this.deviceType = 'mobile-form';
                } else {
                    this.deviceType = window.innerWidth >= 768 ? 'pc-form' : 'mobile-form';
                }
                this.inline = this.deviceType === 'pc-form'
            },
            generateUUID() {
                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
                );
            },
            reCalculate() {
                for (let i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].result = this.tableData[i].price / (this.tableData[i].standard * this.tableData[i].number)
                    this.tableData[i].maxCheap = false;
                }
                // 遍历并更新最便宜的
                let minIndex = 0;
                let minValue = this.tableData[0].result;
                for (let i = 1; i < this.tableData.length; i++) {
                    if (this.tableData[i].result < minValue) {
                        minValue = this.tableData[i].result;
                        minIndex = i;
                    }
                }
                this.tableData[minIndex].maxCheap = true;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            clearTable() {
                this.$confirm('确认删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData = []
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
            },
            removeDate(data) {
                let index = this.tableData.findIndex(item => item.id === data.id);
                if (index > -1) {
                    this.tableData.splice(index, 1)
                }
                this.reCalculate()
            },
            getResultStyle(data) {
                if (this.tableData.length === 1) {
                    return 'font-weight: bold; color:#67C23A;'
                } else {
                    if (data.maxCheap) {
                        return 'font-weight: bold; color:#67C23A;'
                    } else {
                        return 'font-weight: bold;'
                    }
                }

            }
        }
    })
</script>
<style>
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }

    .no-input-number {
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        inputp[type='number'] {
            -moz-appearance: textfield;
        }
    }

    @media (max-width: 600px) {
        body {
            font-size: 1.2em;
        }

        .el-row {
            flex-direction: column !important;
            align-items: stretch !important;
        }

        .el-col {
            width: 100% !important;
        }

        .el-form-item {
            width: 100% !important;
        }

        .el-table th, .el-table td {
            display: block !important;
            width: 100% !important;
        }

        .el-table__header-wrapper, .el-table__body-wrapper {
            overflow-x: auto !important;
        }
    }
</style>
</html>